<!-- MechanismList.vue -->
<template>
  <div class="feed-back-list">
    <el-tabs
      v-model="active"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="(item,index) in issueStatuses"
        :key="index"
        :label="item.label"
        :name="item.status.toString()"
      ></el-tab-pane>
    </el-tabs>
    <el-table
      v-loading="loading"
      :data="totalData"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="反馈的问题">
              <span>{{ props.row.content }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="中文名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="alis"
        label="英文名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="version"
        label="版本"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="180"
      >
        <template slot-scope="props">
          <el-row
            type="flex"
            justify="start"
            align="middle"
          >
            <el-col :span="16">
              <span v-if="isView">{{issueStatus[props.row.status] }}</span>
              <el-select
                @change="handleStatusChange(props.row)"
                v-else
                class="select-status"
                v-model="props.row.status"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in issueStatuses"
                  :key="item.status"
                  :label="item.label"
                  :value="item.status"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col
              :span="6"
              @click.native="editStatus(props.row.status)"
            >
              <i class="el-icon-edit edit-status"></i>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        prop="time"
        label="日期"
        width="180"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="active != 2"
            size="mini"
            type="danger"
            @click="refuse(scope.row)"
          >拒绝处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :page-size="10"
      :pager-count="11"
      layout="total, prev, pager, next"
      :total="total"
      style="margin-top:16px"
    >
    </el-pagination>

    <el-dialog
      title="拒绝处理"
      :visible.sync="dialogVisible"
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请填写拒绝理由，不得超过30字"
        v-model="reason"
      >
      </el-input>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleRefuse"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { MessageBox, Message } from "element-ui";

export default {
  name: "TechList",
  data() {
    return {
      reason: "",
      dialogVisible: false,
      loading: false,
      currentTabs: [],
      totalData: [], // 获取总数据
      currentData: [], // 当前渲染的数据
      itemDetailData: {},
      issueType: {
        0: "百科",
        1: "非百科",
      },
      active: "0",
      issueStatuses: [
        {
          status: 0,
          label: "待处理",
        },
        {
          status: 1,
          label: "已处理",
        },
        {
          status: 2,
          label: "拒绝处理",
        },
      ],
      issueStatus: {
        0: "待处理",
        1: "已处理",
        2: "拒绝处理",
      },
      total: 0,
      isView: true,
      pageSize: 10,
      pageNum: 0,
      currentStatus: null,
      temp: {},
    };
  },
  activated() {
    this.fetchData();
  },
  watch: {
    "$store.state.version": function () {
      // this.fetchData();
    },
  },
  methods: {
    handleClick() {
      this.fetchData();
    },
    editStatus(status) {
      this.currentStatus = status;
      this.isView = false;
    },
    refuse(item) {
      this.temp = item;
      this.dialogVisible = true;
    },
    async handleRefuse() {
      let item = this.temp;
      if (this.reason.length > 30) {
        Message({
          type: "error",
          message: "超过字数限制!",
        });
        this.dialogVisible = false;
        return;
      }
      if (!this.reason) {
        Message({
          type: "error",
          message: "请填写拒绝理由!",
        });
        this.dialogVisible = false;
        return;
      }
      const res = await this.axios.post("feedback/update", {
        id: item._id,
        status: 2,
        reason: this.reason,
      });
      if (res.data.code === 0) {
        if (this.totalData.length === 1) {
          this.pageNum = this.pageNum > 0 ? this.pageNum - 1 : 0;
        }
        await this.fetchData();
        this.isView = true;
        Message({
          type: "success",
          message: "修改成功!",
        });
        this.dialogVisible = false;
      } else {
        Message({
          type: "error",
          message: "修改失败!",
        });
      }
    },
    handleStatusChange(item) {
      if (item.status === 2) {
        Message({
          type: "info",
          message: "使用右侧拒绝按钮!",
        });
        return;
      }
      MessageBox.confirm("是否确定修改状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          const res = await this.axios.post("feedback/update", {
            id: item._id,
            status: item.status,
          });
          if (res.data.code === 0) {
            if (this.totalData.length === 1) {
              this.pageNum = this.pageNum > 0 ? this.pageNum - 1 : 0;
            }
            await this.fetchData();
            this.isView = true;
            Message({
              type: "success",
              message: "修改成功!",
            });
          } else {
            Message({
              type: "error",
              message: "修改失败!",
            });
          }
        })
        .catch(() => {
          item.status = this.currentStatus;
          this.isView = true;
        });
    },
    // handleDelete(id) {
    //     MessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning',
    //       center: true
    //     }).then(async () => {
    //       const res = await this.axios.post('feedback/delete', {
    //         id: id
    //       })
    //       if (res.data.code === 0) {
    //         if (this.totalData.length === 1) {
    //             this.pageNum = this.pageNum > 0 ? this.pageNum - 1 : 0
    //         }
    //         this.fetchData()
    //         Message({
    //             type: 'success',
    //             message: '删除成功!'
    //         });
    //       } else {
    //         Message({
    //             type: 'error',
    //             message: '删除失败!'
    //         });
    //       }

    //     }).catch(() => {
    //     });
    // },
    handlePageChange(pageNum) {
      this.pageNum = pageNum - 1;
      this.fetchData();
    },
    /**
     * 获取列表数据
     **/
    fetchData() {
      this.loading = true;
      this.axios
        .get(`feedback?pageSize=10&pageNum=${this.pageNum}`, {
          params: {
            status: parseInt(this.active),
          },
        })
        .then((res) => {
          this.totalData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    /**
     * 获取详情数据
     **/
    toDetail(id) {
      this.$router.push({
        path: "/mechanism-detail",
        query: {
          id: id,
        },
      });
    },
    goAdd() {
      this.$router.push("/add-mechanism");
    },
  },
};
</script>

<style lang="scss">
.feed-back-list {
  .select-status {
    .el-input {
      border-bottom: 1px solid #dcdfe6;
    }
    .el-input__inner {
      padding-left: 0 !important;
      border: none;
      background-color: transparent;
    }
  }
}
</style>

<style lang="scss" scoped>
.feed-back-list {
  position: relative;
  padding: 16px;
  .edit-status {
    cursor: pointer;
  }
  .basic-attribute {
    height: 60px !important;
  }
  .margin-right-12 {
    margin-right: 12px;
  }
  .not-have {
    // display: flex;
  }
  .upload-position {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
  }
  .material {
    display: flex;
    align-items: center;
    img {
      width: 32px;
    }
  }
  .material-img {
    width: 32px;
  }
}
</style>
